<template>
	<ve-upload-base
		ref="veUpload"
		:suffixs="['mp3']"
		:size="size"
		:disabled="disabled"
		@onRemove="handleRemove"
		@onSuccess="handleSuccess"
		@onProgress="handleProgress"
		:file-list="fileList"
	>
		<div class="upload-btn">
			<slot />
		</div>
	</ve-upload-base>
</template>

<script>
    export default {
        name: "veUploadAudio",
        props:{
	        defaultFile: {
		        type: Object
	        },
            type:{//按钮样式
                type:String,
                default:'primary'
            },
            text:{//按钮文字
                type:String,
                default:'点击上传'
            },
            disabled:{
                type:Boolean,
                default:false
            },
            size:{
                type:Number,
                default:10*1024*1024
            }
        },
        data() {
            return {
	            fileInfo: {},
	            fileList: [],
            };
        },
        methods: {
            reset() {//重置
                this.$refs.veUpload.reset();
	            this.fileList = [];
            },
            handleSuccess(fileInfo) {
	            this.fileList = [fileInfo];
                this.fileInfo=fileInfo;
                this.$emit("on-success",this.fileInfo);
            },
            handleRemove(file, fileList) {
	            this.fileList = fileList;
                this.$emit("on-remove");
            },
            handleProgress(argu) {
                this.$emit("on-progress", argu);
            },
        },
	    watch: {
		    defaultFile: {
			    immediate: true,
			    handler(newV) {
				    let item = newV;
				    if (item) {
					    this.fileList = [];
					    this.handleSuccess({
						    fileId: item.fileId || item.filePath,
						    filePath: item.filePath,
						    raw: item.raw,
						    fileKey: item.fileKey,
						    name: item.name || item.filePath,
						    size: item.size
					    });
				    }else{
					    this.fileList = [];
				    }
			    }
		    }
	    },
    };
</script>

<style lang="less" scoped>
    .upload-btn{
        display: flex;
        justify-items: center;
        align-items: center;
    }
</style>
